<template>
    <div class="date-picker">
      <div
        class="date-list"
        ref="dateList"
        @touchstart.stop="handleTouchStart"
        @touchmove.stop.prevent="handleTouchMove"
        @touchend.stop="handleTouchEnd"
      >
        <div
          v-for="(date, index) in dateList"
          :key="index"
          class="date-item px-24 h-46 flex  rounded-xl font-22 items-center mx-20 justify-center"
          :class="{ active: selectedIndex === index }"
          @click="handleDateClick(date, index)"
        >
          {{ formatDate(date) }}
        </div>
      </div>
    </div>
  </template>

  <script>
  export default {
    name: 'OptionContract',
    data() {
      return {
        selectedIndex: 0,
        touchStartX: 0,
        touchStartY: 0,
        scrollLeft: 0,
        dateList: [],
        isDragging: false,
        isHorizontalScroll: false
      }
    },
    created() {
      // 生成未来30天的日期
      const today = new Date()
      this.dateList = Array.from({ length: 30 }, (_, i) => {
        const date = new Date()
        date.setDate(today.getDate() + i)
        return date
      })
    },
    methods: {
      formatDate(date) {
        return `${date.getFullYear()}/${String(date.getMonth() + 1).padStart(2, '0')}/${String(date.getDate()).padStart(2, '0')}`
      },
      handleDateClick(date, index) {
        if (this.isDragging) return
        this.selectedIndex = index
        this.$emit('date-select', {
          date: this.formatDate(date),
          index
        })
      },
      handleTouchStart(e) {
        this.touchStartX = e.touches[0].clientX
        this.touchStartY = e.touches[0].pageY
        this.scrollStartX = this.scrollLeft
        this.isDragging = false
        this.isHorizontalScroll = false
      },
      handleTouchMove(e) {
        const touch = e.touches[0]
        const deltaX = touch.clientX - this.touchStartX
        const deltaY = touch.pageY - this.touchStartY

        if (!this.isHorizontalScroll) {
          this.isHorizontalScroll = Math.abs(deltaX) > Math.abs(deltaY)
          if (!this.isHorizontalScroll) {
            e.stopPropagation()
            return
          }
        }

        if (Math.abs(deltaX) > 5) {
          this.isDragging = true
        }

        const newScrollLeft = this.scrollStartX - deltaX
        const maxScroll = this.$refs.dateList.scrollWidth - this.$refs.dateList.clientWidth

        if (newScrollLeft >= 0 && newScrollLeft <= maxScroll) {
          this.$refs.dateList.scrollLeft = newScrollLeft
          this.scrollLeft = newScrollLeft
        }
      },
      handleTouchEnd() {
        setTimeout(() => {
          this.isDragging = false
          this.isHorizontalScroll = false
        }, 50)
      }
    }
  }
  </script>

  <style lang="scss" scoped>
  .date-picker {
    width: 100%;
    overflow: hidden;

    .date-list {
      display: flex;
      overflow-x: auto;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none; // Firefox
      &::-webkit-scrollbar {
        display: none; // Chrome, Safari
      }

      .date-item {
        color: #999;
        white-space: nowrap;
        cursor: pointer;
        position: relative;
        border: 1px solid #212121;
        user-select: none;

        &:first-child {
          margin-left: 0;
        }
        &.active {
          color: #fff;
          border-color: #fff;

          &::after {
            display: none;
          }
        }
      }
    }
  }
  </style>
